<template>
	<view class="content">
		<view>
			<button @click="handleCancel">取消</button>
			<button @click="handleOK">确定</button>
		</view>
		<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"
			:markers="state.markers" @markertap="handleMarkerTap"
		></map>
		<view class="addr-list">
			<view :class="['addr-item',{active:cinema.isActive}]" v-for="cinema in state.markers" @click="handleMoveLocation(cinema)">
				<text>{{cinema.title}}</text>
				<text class="sub-title">地址：{{cinema.address}}</text>
				<text class="sub-title">电话:{{cinema.phone}}</text>
				<text class="sub-title">距离:{{cinema.distance}}km</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onBeforeUpdate} from 'vue';
	import {
		onReady,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,reactive
	} from 'vue';
	import {computeDistance} from '../../utils/util.js';
	const latitude = ref(0);
	const longitude = ref(0);
	const state = reactive({
		markers: [{
				id: 1,
				title: "万达影城(成都锦华路万达广场店)",
				address: "四川省成都市锦江区锦华路一段68号成都锦华路万达广场F3",
				phone: "(028)61111012",
				latitude: 30.626515,
				longitude: 104.102515,
				isActive:false
			},
			{
				id: 2,
				title: "万达影城(成都城中城店)",
				address: "四川省成都市青羊区青龙巷36号泰业城中城1号楼2楼",
				phone: "(028)66555588",
				latitude: 30.678103,
				longitude: 104.071435,
				isActive:false
			},
			{
				id: 3,
				title: "万达影城(新城市购物广场店)",
				address: "四川省成都市新都区马超东路266号新城市购物广场F4",
				phone: "(028)66555588",
				latitude: 30.817591,
				longitude: 104.186107,
				isActive:false
			},
			{
				id: 4,
				title: "万达影城(红牌楼店)",
				address: "四川省成都市武侯区佳灵路7号红牌楼广场3号街区2楼",
				phone: "(028)65518023",
				latitude: 30.639734,
				longitude: 104.034582,
				isActive:false
			},
			{
				id: 5,
				title: "成都万达影城(成都蜀都万达广场店)",
				address: "成都市郫都区望丛东路139号成都蜀都万达广场F4",
				phone: "(028)65049893",
				latitude: 30.814241,
				longitude: 103.91376,
				isActive:false
			},
			{
				id: 6,
				title: "万达影城(万达广场成都双流店)",
				address: "成都市双流区星空路999号万达广场F4",
				phone: "13548184172",
				latitude: 30.603077,
				longitude: 103.933802,
				isActive:false
			}
		]
	});
	
	onReady(() => {
		uni.getLocation({
			type: 'wgs84',
			success: res => {
				latitude.value = res.latitude;
				longitude.value = res.longitude;
			}
			
		});
		state._mapContext  = uni.createMapContext("map");
		
	})

	onBeforeUpdate(() => {
		state.markers.forEach(item => item.distance = computeDistance(latitude.value,longitude.value,item.latitude,item.longitude))
		state.markers.sort((a,b) => a.distance - b.distance)
	});
	function handleMoveLocation(cinema){
		state.markers.forEach(item => item.isActive = false);
		cinema.isActive = true;
		console.log(cinema);
		state._mapContext.moveToLocation({
			latitude : cinema.latitude,
			longitude : cinema.longitude
		});
	}
	function handleMarkerTap(e){
		state.markers.forEach(item => item.isActive = false);
		state.markers.forEach(item => item.id == e.markerId ? item.isActive = true : '')
		// console.log(state.markers);
	}
	function handleCancel(){
		uni.redirectTo({
			url:"/pages/index/index"
		})
	}
	function handleOK(){
		let cinemas = state.markers.filter(item => item.isActive);
		uni.redirectTo({
			url:"/pages/index/index?cinemas=" + encodeURIComponent(JSON.stringify(cinemas))  
		})
	}
</script>

<style>
	.content{
		display: flex;
		flex-direction: column;

	}
	.map{
		/* width: 100%;
		height:300rpx; */
		/* flex:1; */
		width: 100%;
	}
	.addr-list{
		display: flex;
		flex-direction: column;
	}
	.addr-item{
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		border-bottom: 1px solid gray;
		/* flex:1; */
	}
	.sub-title{
		font-size:20rpx;
		color:grey;
		
	}
	.active{
		background-color: #ccc;
	}
</style>
